<template>
  <div v-loading="loading" class="approvalrecord-container">
    <el-empty v-if="!approvalRecordList || !approvalRecordList.length" description="暂无审批记录" />
    <el-timeline v-else class="approvalrecord-timeline">
      <el-timeline-item
        v-for="(item,index) in approvalRecordList"
        :key="index"
        :type="typeColor[item.recordType]"
        color="hsv"
        :timestamp="formatTime(item.approveTime)"
        placement="top"
        class="approvalrecord-timeline-item"
      >
        <div class="item-card">
          <h4 class="item-title">{{ item.nodeNameDescription }}</h4>
          <p>
            <span class="item-name">{{ formatUserName(item.approveUserName) }}</span>
            <span v-if="item.handleTypeDescription"> -- </span>
            <span v-if="item.handleTypeDescription" :class="handlerColor[item.handleType]">{{ item.handleTypeDescription }}</span>
          </p>
          <p class="item-memo">
            {{ item.remark }}
          </p>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import { formatTime, formatUserName } from '@/utils/tools'
export default {
  name: 'ApprovalRecord',
  props: {
    approvalRecordList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      typeColor: {
        history: 'success',
        current: 'primary',
        future: 'info'
      },
      handlerColor: {
        reject: 'reject',
        pass: 'pass',
        submit: 'submit',
        uploadContract: 'uploadContract'
      }
    }
  },
  methods: {
    formatUserName,
    formatTime
  }
}
</script>

<style lang="scss"  scoped>
.approvalrecord-container {
  padding-top: 20px;
  .approvalrecord-timeline {
    .item-card {
      .info {
        color: #909399;
      }
      .primary {
        color: #0072ff;
      }
      .success {
        color: #13ce66;
      }
      .reject {
        color: red
      }
      .pass {
        color: #13ce66
      }
      .submit {
        color: #0072ff;
      }
    }
  }
}
</style>
<style  scoped>
@keyframes flashingShow {
  0% {
    width: 12px;
    height: 12px;
  }
  100% {
    width: 30px;
    height: 30px;
    margin-left: -10px;
    margin-top: -10px;
  }
}
.approvalrecord-container /deep/ .el-timeline-item__node--primary {
  animation: flashingShow 1s infinite;
}
</style>
